<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广告管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<!-- uploadify -->
	<script type="text/javascript" src="../plugins/uploadify/jquery.uploadify.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../plugins/uploadify/uploadify.css" />

</head>
<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
	<h3 class="box-title">广告管理</h3>
</div>

<div class="box-body">

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="deleteBatch()"><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i class="fa fa-check"></i> 开启</button>
					<button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i class="fa fa-ban"></i> 屏蔽</button>
					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">

			</div>
		</div>
		<!--工具栏/-->

		<!--数据列表-->
		<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			<thead>
			<tr>
				<th class="" style="padding-right:0px">
					<input id="selall" type="checkbox" class="icheckbox_square-blue">
				</th>
				<th class="sorting_asc">广告ID</th>
				<th class="sorting">分类ID</th>
				<th class="sorting">标题</th>
				<th class="sorting">URL</th>
				<th class="sorting">图片</th>
				<th class="sorting">排序</th>
				<th class="sorting">是否有效</th>
				<th class="text-center">操作</th>
			</tr>
			</thead>
			<tbody id="content">

			</tbody>
		</table>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">广告编辑</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>广告分类</td>
						<td>
							<select class="form-control" id="cate">
								<option th:each="cate:${list}" th:value="${cate.id}">[[${cate.name}]]</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>标题</td>
						<td><input  class="form-control" placeholder="标题" id="title">  </td>
					</tr>
					<tr>
						<td>URL</td>
						<td><input  class="form-control" placeholder="URL" id="url">  </td>
					</tr>
					<tr>
						<td>排序</td>
						<td><input  class="form-control" placeholder="排序" id="order">  </td>
					</tr>
					<tr>
						<td>广告图片</td>
						<td>
							<table>

								<tr>
									<td>
										<div id="fileQueue"	></div>
										<input type="file" name="myFile" id="uploadImg" />

									</td>
									<td>
										<img  src="../img/user2-160x160.jpg" id="add_img" width="200px" height="200px">
										<input type="hidden" id="cool">
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>是否有效</td>
						<td>
							<input type="checkbox" class="icheckbox_square-blue" value="1" checked id="status">
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addData()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>

<!-- 编辑窗口 -->
<div class="modal fade" id="editModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel2">广告编辑</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>广告分类</td>
						<td>
							<input type="hidden" id="CID">
							<select class="form-control" id="cate2">
								<option th:each="cate:${list}" th:value="${cate.id}">[[${cate.name}]]</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>标题</td>
						<td><input  class="form-control" placeholder="标题" id="title2">  </td>
					</tr>
					<tr>
						<td>URL</td>
						<td><input  class="form-control" placeholder="URL" id="url2">  </td>
					</tr>
					<tr>
						<td>排序</td>
						<td><input  class="form-control" placeholder="排序" id="order2">  </td>
					</tr>
					<tr>
						<td>广告图片</td>
						<td>
							<table>

								<tr>
									<td>
										<div id="fileQueue2"	></div>
										<input type="file" name="myFile" id="uploadImg2" />

									</td>
									<td>
										<img  src="../img/user2-160x160.jpg" id="add_img2" width="200px" height="200px">
										<input type="hidden" id="cool2">
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>是否有效</td>
						<td>
							<input type="checkbox" class="icheckbox_square-blue" value="1" checked id="status2">
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="changeData()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
</body>
<script>
	$(function(){
		//AJAX 异步 上传文件 不保存数据
		$("#uploadImg").uploadify({
			//插件自带  不可忽略的参数flash插件
			'swf': '/js/uploadify/uploadify.swf',
			//前台请求后台的url 不可忽略的参数
			'uploader': '/content/upLoadFile',
			//给div的进度条加背景 不可忽略
			'queueID': 'fileQueue',
			//上传文件文件名 跟file标签 name值 保持一致
			'fileObjName' : 'myFile',
			//给上传按钮设置文字
			'buttonText': '上传',
			//设置文件是否自动上传
			'auto': true,
			//可以同时选择多个文件 默认为true  不可忽略
			'multi': true,
			//上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
			//'All Files'  ;  '*.*',
			//在浏览窗口底部的文件类型下拉菜单中显示的文本
			'fileTypeDesc': 'Image Files',
			//上传后队列是否消失
			'removeCompleted': true,
			//队列消失时间
			'removeTimeout' : 1,
			//上传文件的个数，项目中一共可以上传文件的个数,-1 ： 可以上传多个不限制
			'uploadLimit':  -1,
			//允许上传的文件后缀//  '*.xls;*.xlsx'
			'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png',
			//成功回调函数 file：文件对象。data后台输出数据
			'onUploadSuccess':function(file,data,response){
				//alert(file.name+" 路径："+data)
				//图片回显， 预览
				$("#add_img").attr("src",data);
				$("#cool").val(data);
			}
		});
	});



	//修改上传
	$(function(){
		//AJAX 异步 上传文件 不保存数据
		$("#uploadImg2").uploadify({
			//插件自带  不可忽略的参数flash插件
			'swf': '/js/uploadify/uploadify.swf',
			//前台请求后台的url 不可忽略的参数
			'uploader': '/content/upLoadFile',
			//给div的进度条加背景 不可忽略
			'queueID': 'fileQueue',
			//上传文件文件名 跟file标签 name值 保持一致
			'fileObjName' : 'myFile',
			//给上传按钮设置文字
			'buttonText': '上传',
			//设置文件是否自动上传
			'auto': true,
			//可以同时选择多个文件 默认为true  不可忽略
			'multi': true,
			//上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
			//'All Files'  ;  '*.*',
			//在浏览窗口底部的文件类型下拉菜单中显示的文本
			'fileTypeDesc': 'Image Files',
			//上传后队列是否消失
			'removeCompleted': true,
			//队列消失时间
			'removeTimeout' : 1,
			//上传文件的个数，项目中一共可以上传文件的个数,-1 ： 可以上传多个不限制
			'uploadLimit':  -1,
			//允许上传的文件后缀//  '*.xls;*.xlsx'
			'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png',
			//成功回调函数 file：文件对象。data后台输出数据
			'onUploadSuccess':function(file,data,response){
				//alert(file.name+" 路径："+data)
				//图片回显， 预览
				$("#add_img2").attr("src",data);
				$("#cool2").val(data);
			}
		});
	});
	$(function () {
		getData();
	});
	function getData() {
		$.ajax({
			url: "/tbContentCategory/getContentInfo" ,
			type: "post",
			data: {},
			dataType: "json",
			async: false,
			success: function (result) {
				if(result.code == 10000){
					var list = result.result;
					var info = "";
					$(list).each(function (i,e) {
						info += "<tr>";
						info += '<td><input  type="checkbox" value="'+e.id+'" name="box"></td>';
						info += '<td>'+e.id+'</td>';
						info += '<td>'+e.categoryId+'</td>';
						info += '<td>'+e.title+'</td>';
						info +='<td>'+e.url+'</td>';
						info +='<td>';
						info +='<img alt="" src="'+e.pic+'" width="100px" height="50px">';
						info +='</td>';
						info +='<td>'+e.sortOrder+'</td>';
						if(e.status == 1){
							info +='<td>有效</td>';
						}else {
							info +='<td>无效</td>';
						}
						info +='<td>有效</td>';
						info += '<td class="text-center">';
						info += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal2"  onclick="updateBrand('+e.id+')">修改</button>';
						info += '</td>';
						info += '</tr>';
					});
					$("#content").html(info);
				}
			},
			error: function () {
				alert("系统异常,请联系管理员");
				/*toastr.error("系统异常,请联系管理员");*/
			}
		})
	}
	//增加
	function addData() {
		var categoryId = $("#cate").val();
		var title = $("#title").val();
		var url = $("#url").val();
		var pic = $("#cool").val();
		var status = $("#status").val();
		var sortOrder = $("#order").val();
		$.ajax({
			url:"/tbContentCategory/addContentInfo",
			type:"post",
			data:{pic:pic,categoryId:categoryId,title:title,url:url,status:status,sortOrder:sortOrder},
			dataType:"json",
			async:false,
			success:function(result){
				if(result.code == 10000){
					window.location.reload();
				}

			},
			error:function(){
				alert("系统异常，联系管理员");
			}
		});
	}

	// function changeData2() {
	// 	alert($("#CID").val())
	// }

	function changeData() {
		var id = $("#CID").val();
		var categoryId = $("#cate2").val();
		var title = $("#title2").val();
		var url = $("#url2").val();
		var pic = $("#cool2").val();
		var status = $("#status2").val();

		var sortOrder = $("#order2").val();
		$.ajax({
			url:"/tbContentCategory/updateById",
			type:"post",
			data:{id:id,pic:pic,categoryId:categoryId,title:title,url:url,status:status,sortOrder:sortOrder},
			dataType:"json",
			async:false,
			success:function(result){
				if(result.code == 200){
					window.location.reload();
				}
			},
			error:function(){
				alert("系统异常，联系管理员");
			}
		});
	}
	//回顯
	function updateBrand(id) {
		$.ajax({
			url: "/tbContentCategory/toUpdate1/"+id,
			type: "post",
			data: {},
			dataType: "json",
			async: false,
			success: function (result) {
				if(result.code == 200){
					var content = result.result;
					$("#CID").val(content.id);
					$("#cate2").val(content.categoryId);
					$("#title2").val(content.title);
					$("#url2").val(content.url);
					$("#cool2").val(content.pic);
					$("#add_img2").attr('src',content.pic);
					$("#order2").val(content.sortOrder);
					var status = $("#status2").checked(true);
				}

			},
			error: function () {
				alert("系统异常,请联系管理员");
			}
		})
	}
	function deleteBatch() {
		alert(111)
		var ids = [];
		$("[name=box]:checked").each(function (i,e) {
			ids.push(e.value);
		});
		if(ids.length <= 0){
			alert("请选择需要删除的行");
			return;
		}
		$.ajax({
			url:"/tbContentCategory/deleteBatch1/"+ids,
			type : "post",
			data:{},
			dataType : "json",
			async : false,//同步
			success : function(result) {
				if(result.code == 10000){
					window.location.reload();
				}
			},
			error : function() {
				alert("系统异常,请联系管理员");
			}
		})
	}
</script>
</html>